<template>
  <view class="charts-box">
    <qiun-data-charts 
      type="column"
      :opts="opts"
      :chartData="chartData"
    />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

// 图表数据结构接口定义
// 用于约束图表数据的格式，确保数据符合预期结构
interface ChartData {
  // 类别数组，通常用于X轴坐标标签
  categories: string[];
  // 系列数据数组，每个系列包含名称和数据数组
  series: {
    name: string;  // 系列名称，会显示在图例中
    data: number[];  // 系列数据，与categories一一对应
  }[];
}

// 图表配置选项接口定义
// 用于约束图表配置的格式，提供类型检查
interface ChartOpts {
  // 图表颜色数组，用于不同系列的颜色区分
  color: string[];
  // 图表内边距，格式：[上, 右, 下, 左]
  padding: number[];
  // 是否启用滚动
  enableScroll: boolean;
  // 图例配置
  legend: Record<string, unknown>;
  // X轴配置
  xAxis: {
    disableGrid: boolean;  // 是否禁用X轴网格线
  };
  // Y轴配置
  yAxis: {
    data: {
      min: number;  // Y轴最小值
    }[];
  };
  // 扩展配置，针对特定图表类型的配置
  extra: {
    column: {
      type: string;  // 柱状图类型，如'stack'表示堆叠柱状图
      width: number;  // 柱子宽度
      activeBgColor: string;  // 鼠标激活时的背景颜色
      activeBgOpacity: number;  // 鼠标激活时的背景透明度
      meterBorder: number;  // 仪表边框宽度
      meterFillColor: string;  // 仪表填充颜色
    };
  };
  fontColor: string;  // 字体颜色

}

// 创建响应式图表数据变量
// 使用ref包装，使其成为响应式数据，初始化为空对象并断言为ChartData类型
const chartData = ref<ChartData>({} as ChartData);

// 创建响应式图表配置变量
// 包含图表的各种样式和行为配置
const opts = ref<ChartOpts>({
  color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
  padding: [15,15,0,5],  // 上15px, 右15px, 下0px, 左5px
  enableScroll: false,  // 禁用滚动
  legend: {},  // 图例配置为空，使用默认值
  xAxis: {
    disableGrid: true  // 禁用X轴网格线
  },
  yAxis: {
    data: [
      {
        min: 0  // Y轴最小值为0
      }
    ]
  },
  extra: {
    column: {
      type: "meter",  // 堆叠柱状图
      width: 30,  // 柱子宽度为30px
      activeBgColor: "#000000",  // 鼠标激活时背景为黑色
      activeBgOpacity: 0.08,  // 鼠标激活时背景透明度为0.08
      meterBorder: 3,  // 仪表边框宽度为3px
      meterFillColor: "blue",  // 仪表填充颜色
    
    }
  },
  fontColor:'#EBFBD6',
 
});

/**
 * 模拟从服务器获取数据的函数
 * @function getServerData
 * @returns {void} 无返回值，通过修改chartData.value更新数据
 * @description 模拟异步请求服务器数据的过程，包含延迟处理和数据格式化
 */
const getServerData = () => {
  // 使用setTimeout模拟网络请求延迟500ms
  setTimeout(() => {
    // 模拟服务器返回的数据
    const res: ChartData = {
      categories: ["2018","2019","2020","2021","2022","2023","2024","2025"],
      series: [
        {
          name: "当前锅号工单完成数",
          data: [2,36,31,33,13,34,13,34]
        },
        {
          name: "当前锅号所有工单数",
          data: [1,27,21,24,6,28,7,21]
        }
      ]
    };
    // 深拷贝数据并赋值给响应式变量，触发视图更新
    // 使用JSON.parse(JSON.stringify(res))确保完全深拷贝，避免引用问题
    chartData.value = JSON.parse(JSON.stringify(res)) as ChartData;
  }, 500);
};

onMounted(() => {
  getServerData();
});
</script>

<style scoped>
  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
  .charts-box {
    width: 100%;
    height: 300px;
  }
</style>